<template>
	<div class="maintitle">
		<div class="miantitleOne">
			<div class="divOne"></div>
			<div class="divTwo"></div>
		</div>
		<div class="miantitleTwo">
			<div class="divThree"></div>
			<div class="divFour"></div>
		</div>
		<div class="maintitlemain">
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'maintitle',
		components: {

		},
		data: () => ({

		}),
		methods: {

		}
	}
</script>

<style scoped="scoped">
	.maintitle {
		width: 100vw;
		height: 100vh;
		display: flex;
		 flex-direction: row-reverse;
		 background-image: url(../../../assets/static/maintitle/beijing.jpg);
		 background-repeat: no-repeat;
		 background-size: 100% 100%;
	}
	.maintitle>div:nth-child(1){
		width: 50vw;
		display: flex;
		flex-direction: column;
	}
	.maintitle>div:nth-child(2){
		width: 50vw;
		display: flex;
		flex-direction: column;
	}
	.miantitleOne>div:nth-child(1){
		width: 45vw;
		height: 48vh;
		background-image: url(../../../assets/static/maintitle/1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.miantitleOne>div:nth-child(2){
		width: 45vw;
		height: 48vh;
		background-image: url(../../../assets/static/maintitle/2.jpg);
		background-repeat: no-repeat;
		background-size: 100% 120%;
	} 
	.miantitleOne>div{
		margin: auto;
			transition: width 1s,height 1s;
	}
	.miantitleOne>div:hover{
		width: 44vw;
		height: 47vh;
	}
 	.miantitleTwo>div:nth-child(1){
		width: 45vw;
		height: 48vh;
		background-image: url(../../../assets/static/maintitle/3.jpg);
		background-repeat: no-repeat;
		background-size: 100% 140%;
	}
	.miantitleTwo>div:nth-child(2){
		width: 45vw;
		height: 48vh;
		background-image: url(../../../assets/static/maintitle/4.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.miantitleTwo>div{
		margin: auto;
		transition: width 1s,height 1s;
	}
	.miantitleTwo>div:hover{
		width: 44vw;
		height: 47vh;
	}
	.maintitlemain{
		width: 25vw;
		height: 53vh;
		background-color: #FF0000;
		position: absolute;
		opacity: 0.5;
		top: 40vh;
		left: 38vw;
		transform:rotate(45deg);
		transition: width 1s,height 1s,top 1s,left 1s;
	}
	.maintitlemain:hover{

		width: 27vw;
		height: 55vh;
		position: absolute;
		top: 39vh;
		left: 37vw;
	}
</style>
